<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="handleClose"
      :close-on-click-modal="false">
      <el-form :inline="false" :model="formInline" ref="template-add-form" :rules="formRules" class="demo-form-inline"
        v-loading="loadingForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="账号:" prop="username">
              <el-input v-model="formInline.username" class="cell-input" placeholder="请输入账号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="昵称:" prop="nickname">
              <el-input v-model="formInline.nickname" class="cell-input" placeholder="请输入昵称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="title == '新增'">
          <el-col :span="24">
            <el-form-item label="密码:" prop="password">
              <el-input v-model="formInline.password" class="cell-input" placeholder="请输入密码">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="title == '修改'">
          <el-col :span="24">
            <el-form-item label="旧密码:" prop="oldPwd">
              <el-input v-model="formInline.oldPwd" class="cell-input" placeholder="请输入密码">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="title == '修改'">
          <el-col :span="24">
            <el-form-item label="新密码:" prop="newPwd">
              <el-input v-model="formInline.newPwd" class="cell-input" placeholder="请输入密码">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="邮箱:" prop="mail">
              <el-input v-model="formInline.mail" class="cell-input" placeholder="请输入邮箱">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
let _this
import { addUser, updataUser,findUser } from "@/api/setting/user";
export default {
  data() {
    return {
      title: "",
      id: null,
      dialogVisible: false,
      formRules: {
        username: {
          required: true,
          message: "请输入账号",
          trigger: "blur",
        },
        nickname: {
          required: true,
          message: "请输入昵称",
          trigger: "blur",
        },
        password: {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
      },
      formInline: {},
      loadingScreen: null,
      loadingForm: false,
      fileName: "",
      btnLoading: false,
    };
  },
  methods: {
    async init(username) {
      try {
        _this = this;
        this.title = "";
        this.resetFrom();
        this.dialogVisible = true;
        if (!username) return (this.title = "新增");
        this.title = "修改";
        this.loadingForm = true;
        let res = await findUser({},{username});
        this.loadingForm = false;
        this.formInline.username = username;
        Object.keys(this.formInline).forEach((item) => {
          this.formInline[item] = res.resultValue.currentUser[item];
        });
      } catch (e) {
        this.loadingForm = false;
        //TODO handle the exception
      }
    },
    resetFrom() {
      this.formInline = {
        username: "",
        nickname: "",
        oldPwd: "",
        newPwd: "",
        mail: ""
      };
      if (this.$refs["template-add-form"])
        this.$refs["template-add-form"].resetFields();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleSubmit() {
      this.$refs["template-add-form"].validate(async (valid) => {
        try {
          if (valid) {
            let res;
            this.btnLoading = true;
            if (this.title == '新增') {
              res = await addUser(this.formInline);
              this.$message.success("添加成功");
            } else {
              res = await updataUser(this.formInline);
              this.$message.success("更新成功");
            }
            this.btnLoading = false;
            this.dialogVisible = false;
            this.$emit("success");
          }
        } catch (e) {
          this.btnLoading = false;
        }
      });
    },
  },
  created() {
    this.resetFrom();
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  text-align: left;
}

.width100 {
  width: 590px;
}

.cell-input {
  width: 330px;
}

.up-file-wrappar {
  display: flex;
  align-items: center;
}

.total-day {
  display: inline-block;
  height: 36px;
  width: 40px;
  margin: 0 6px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  padding: 0 15px;
  box-sizing: border-box;
}

.up-file-name {
  display: inline-block;
  height: 36px;
  min-width: 555px;
  text-align: left;
  line-height: 36px;
  box-sizing: border-box;
  padding: 0 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #606266;
  font-size: inherit;

  .text {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 1; //行数
    -webkit-box-orient: vertical;
    max-width: 555px;
  }
}
</style>
